@charset "utf-8";
@import 'reset';
@import 'common';

.web {
    main {
        %common {
            margin: 0 auto;
            position: relative;
            width: 145px;
            height: 36px;
            text-align: center;
            border: 1px solid $color;
            h3 {
                position: absolute;
                width: 95px;
                top: -50%;
                left: 50%;
                transform: translateX(-50%);
                font-size: 22px;
                background-color: #fff;
                span {
                font-size: 16px;
                }
            }
        }
        // 关于我们
        .about-us {
            background-color: #fafafa;
            overflow: hidden;
            .about-us-title {
                @extend %common;
                margin-top: 26px;
                h3 {
                    background-color: #fafafa;
                }
                }
                .about-us-list {
                    ul {
                        display:flex;
                        margin-top:21px;
                        
                        li {
                            text-align:center;
                            img {
                                margin-top:20px;
                                width:126px;
                                height:126px;
                            }
                            .tip {
                                margin-top:16px;
                                font-size:16px;
                                font-weight:bold;
                            }
                            p {
                                margin:14px auto 19px;
                                width:246px;
                                font-size:12px;
                                color:#838383;
                                text-align:justify;
                                letter-spacing: 2px;
                                line-height: 25px;
                            }
                        }
                        li:first-child {
                            margin-left:51px;
                            margin-right:21px;
                            width:270px;
                            // height:319px;
                            background-color: #f2f2f2;
                        }
                        li:nth-child(2) {
                            margin-right:21px;
                            width:322px;
                            // height:319px;
                            background-color: #f2f2f2;
                        }
                        li:nth-child(3) {
                            width:270px;
                            // height:319px;
                            background-color: #f2f2f2;
                        }
                    }
                }
        }

        // 投资案例
        .our-portfolio {
            @extend %common;
            margin-top:34px;
            h3 {
                span {
                    display: block;
                    transform:translateX(-20px);
                    margin-top:5px;
                    width:132px;
                }
            }
        }
        .our-portfolio-list {
            ul {
                display:flex;
                flex-wrap:wrap;
                justify-content: space-between;
                margin:22px 50px 0;

                // width:880px;
                li {
                    width:285px;
                    // height:285px;
                    // background-color: #f2f2f2;
                    text-align:center;
                    img {
                        width:283px;
                        height:210px;
                        border:1px solid #000;
                    }
                    p {
                        margin-top:15px;
                        margin-bottom:20px;
                        font-size:12px;
                        letter-spacing:2px;
                    }
                    .btn {
                        width:135px;
                        height:27px;
                        background-color: $color;
                        margin:0 auto 22px;
                        line-height:27px;
                        font-size:15px;
                        letter-spacing:3px;
                        color:#fff;
                    }
                }
            }
        }

        // 友情链接
        .link {
            position:relative;
            margin:25px auto 28px;
            width:900px;
            height:305px;
            background-image: url('../images/link.png');
            background-color: rgba(0,0,0,0.8);
            .link-title {
                position:absolute;
                top:33px;
                left:50%;
                transform:translateX(-50%);
                z-index: 99;
                @extend %common;
                h3 {
                    background-color: transparent;
                    .chinese-tip {
                        font-size: 22px;
                        background-color:#65696b;
                        color:white;
                    }
                    .english-tip {
                        font-size: 16px;
                        background-color:#65696b;
                        color:white;
                    }
                }
            }
            ul {
                display:flex;
                justify-content: center;
                align-items:center;
                position: relative;
                width:100%;
                height:100%;
                z-index: 9;
                li:nth-child(2) {
                    margin:0 22px;
                }
            }
            %left-right {
                position:absolute;
                top:50%;
                transform:translateY(-50%);
                width:37px;
                height:69px;
                background-color: rgba(0,0,0,0.4);
                text-align:center;
                line-height:85px;
            }
            .left-btn {
                @extend %left-right;
                left:7px;
            }
            .right-btn {
                @extend %left-right;
                right:7px;
            }
        }
    }
}